{include file='common/head'}
    {include file='common/footer'}
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<blockquote class="layui-elem-quote layui-text">
  <div class="demoTable layui-form">
    <!--<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>-->
    <div class="demoTable layui-form">
      <div class="layui-input-inline">
        <input type="text" placeholder="请输入产品名称" name="name" lay-verify="required|phone"  autocomplete="off" class="layui-input">
      </div>
      <div class="layui-input-inline">
        <select name="category"  lay-search>
          <option value="">筛选产品类型</option>
          <option value="1">通讯类</option>
          <option value="2">金融类</option>
        </select>
      </div>
      <button class="layui-btn " data-type="reload" ><i class="layui-icon">&#xe615;</i>搜索</button>
    </div>
  </div>
</blockquote>
<table class="layui-hide" id="test" lay-size="sm"></table>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

  <!-- 这里同样支持 laytpl 语法，如： -->
  {{#  if(d.auth > 2){ }}
  <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
  {{#  } }}
</script>
<script src="/static/admin/jquery.js"></script>
<script type="text/javascript" src="/static/index/layer/layer.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#test'
            ,url:'/admin/Test/pagedata'
            ,toolbar:'#barDemo'
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,limit:10 //一页显示多少条
                ,limits:[10,15,20]//每页条数的选择项
                ,groups: 10 //只显示 2 个连续页码
                ,first: "首页" //不显示首页
                ,last: "尾页" //不显示尾页

            }
            ,cols: [[
                {field:'id', width:341, title: 'ID', sort: true}
                ,{field:'api_name', width:341, title: '接口名称'}
                ,{field:'key', width:341, title: 'key值'}
                ,{field:'solo_price', width:341, title: '接口单价',sort: true}
                ,{field:'', width:341, title: '操作'}

            ]]

        });
        //监听工具条
        table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'detail'){ //查看
                //do somehing
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            }
        });
    });
</script>



</body>
</html>